﻿.chromeframe {
	margin:0;
	height:50px;
	background:#f44a56;
	color:#fff;
	font-size:16px;
	font-family:verdana;
}

::selection {
	background:#0d72c7;
	color:#fff;
}

a:link {text-decoration:none;color:#ff9494;}
a:visited {text-decoration:none;color:#ff9494;}
a:hover {text-decoration:underline;color:#ff9494;}
a:active {text-decoration:underline;color:#ff9494;}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

html, body {
	background:#000 url('../images/bg.png') fixed;
	color:#cfcfcf;
	font-family: 'Lato', sans-serif;
	text-align:center;
	font-size:16px;
}

h1 {
	font-family: 'Lobster', cursive;
	color:#fcfcfc;
	font-size:60px;
	margin:30px;
}

#wrapper {
	margin:0 auto;
	width:800px;
}

#overlay {
	display:none;
	background:rgba(0,0,0,.75);
	width:100%;
	height:100%;
	position:absolute;
	z-index:3;
}

#header {
	text-align:right;
	padding:10px;
	background:#111;
	box-shadow:0 5px 15px rgba(0,0,0,.5);
}

#header span {
	padding:0 10px;
	font-size:13px;
}

#loginname {
	color:#f44a56;
	font-size:20px;
	margin:0 20px 0 0;
	display:inline;
}

#login {
	display:none;
	position:absolute;
	z-index:4;
	padding-top:5px;
	border-radius:5px;
	background:#4c4c4c;
	height:220px;
}

#forgot {
	color:#ff9494;
	text-align:right;
	font-size:13px;
	margin:7px 10px 0 0;
}

#registeration {
	display:none;
	position:absolute;
	z-index:4;
	padding-top:5px;
	border-radius:5px;
	background:#4c4c4c;
	height:265px;
}

.register-error {
	opacity:0.0;
	height:0px;
	border-radius:2px;
	border:1px solid #f00;
	background:#ff9494;
	color:#111;
	width:95%;
	margin:0 auto;
}

.close-button {	
	cursor:pointer;
	position:absolute;
	left:295px;
	top:-15px;
	background:#4c4c4c;
	border-radius:20px;
	box-shadow:0 0 10px #2b2b2b;
}

.textbox {
	background:#eee;
	margin:5px;
	height:50px;
	border-radius:4px;
	border:1px #2b2b2b solid;
	font-family: 'Lato', sans-serif;
	font-size:20px;
	width:300px;
	text-align:center;
}

.button {
	text-shadow:1px 1px 5px #111;
	font-family: 'Lato', sans-serif;
	font-size:18px;
	height:35px;
	width:100px;
	background:#f44a56;
	border-radius:5px;
	border:0;
	color:#fcfcfc;
}

.button:hover {
	background:#3e4b5d;
	animation: submithover .5s;
	-webkit-animation:submithover .5s; 
	-moz-animation:submithover .5s;
	-o-animation:submithover .5s;
}

.bigger {
	width:300px;
	height:50px;
	margin-top:8px;
}

.original {	
	cursor:pointer;
	color:#fcfcfc;
	margin-bottom:-25px;
	box-shadow:-2px 0 10px #111;
	font-family: 'Lobster', cursive;
	text-shadow:1px 1px 5px #000;
	background:#f44a56;
	font-size:20px;
	padding:5px 10px;
	position:relative;
	z-index:0;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	left:40px;
	width:100px;
	top:0px;
	height:50px;
	animation: dragdown .5s;
	-webkit-animation:dragdown .5s; 
	-moz-animation:dragdown .5s;
	-o-animation:dragdown .5s; 
}

.original:hover {
	animation: pullup 1s;
	-webkit-animation:pullup 1s; 
	-moz-animation:pullup 1s;
	-o-animation:pullup 1s;
	top:-20px;
}


.post {
	text-align:left;
	position:relative;
	z-index:1;
	text-align:left;
	background:#2b2b2b;
	padding:15px;
	margin-bottom:50px;
	border-radius:15px;
	box-shadow:0 2px 20px #000;
}

.post p {
	border:1px solid rgba(255,255,255,.3);
	border-radius:15px;
	padding:10px 15px;
	margin:0 0 30px;
	text-shadow:2px 2px 5px #000;
}

.post .author {
	text-align:center;
	cursor:pointer;
	padding:0 10px;
	margin:0;
	border:0;
	float:right;
	position:relative;
	top:-42px;
	left:-25px;
	background:#2b2b2b;
}

.post .author:hover {
	color:#f44a56;
}

.bubble {
	cursor:pointer;	
	position:relative;
	z-index:1;
	top:-85px;
	left:760px;
	width:30px;
	height:30px;
	background:url('../images/iconmonstr-speech-bubble-14-icon.png');
	-o-background-size:100% 100%;               
	-webkit-background-size:100% 100%;            
	-khtml-background-size:100% 100%;         
  -moz-background-size:100% 100%;           
  background-repeat:no-repeat;
}

.bubble:hover {
	background:url('../images/iconmonstr-speech-bubble-14-icon-hover.png');
	-o-background-size:100% 100%;
  -webkit-background-size:100% 100%;
  -khtml-background-size:100% 100%; 
  -moz-background-size:100% 100%; 
  background-repeat:no-repeat;
}

.main {
	border:1px solid #111;
	box-shadow: inset 0 -1px 10px #111;
	margin-bottom:20px;
	padding:10px 15px;
	background:#4c4c4c;
	border-radius:5px;
}

.main p {
	text-align:left;
	border:0;
	padding:0;
	margin:0;
	text-shadow:2px 2px 5px #000;
}

#footer {
	height:100px;
	background:#111;
	box-shadow:0 -5px 15px rgba(0,0,0,.5);
}

#footer p {
	padding-top:40px;
}



@keyframes submithover {
	from {background:#f44a56;}
	to {background:#3e4b5d;}
}
@-o-keyframes submithover {
	from {background:#f44a56;}
	to {background:#3e4b5d;}
}
@-moz-keyframes submithover {
	from {background:#f44a56;}
	to {background:#3e4b5d;}
}
@-webkit-keyframes submithover {
	from {background:#f44a56;}
	to {background:#3e4b5d;}
}



@keyframes pullup {
	from {top:0px;}
	to {top:-20px;}
}
@-o-keyframes pullup {
	from {top:0px;}
	to {top:-20px;}
}
@-moz-keyframes pullup {
	from {top:0px;}
	to {top:-20px;}
}
@-webkit-keyframes pullup {
	from {top:0px;}
	to {top:-20px;}
}



@keyframes dragdown {
	from {top:-20px;}
	to {top:0px;}
}
@-o-keyframes dragdown {
	from {top:-20px;}
	to {top:0px;}
}
@-moz-keyframes dragdown {
	from {top:-20px;}
	to {top:0px;}
}
@-webkit-keyframes dragdown {
	from {top:-20px;}
	to {top:0px;}
}